<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小区管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row style="margin-top: 10px;">
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="小区名称">
					<el-input v-model="queryInfo.communityName" placeholder="输入小区名称"></el-input>
				</el-form-item>
				<el-date-picker value-format='yyyy-MM-dd hh:mm:ss' v-model="date" type="daterange" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
				<el-form-item>
					<el-button @click="onSubmit" type="primary">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-button type="primary" @click="addCommunity">新增小区</el-button>
		</el-row>


		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form :model="communityData">
				<el-form-item label="小区名称" label-width="80px">
					<el-input v-model="communityData.communityName" autocomplete="off" placeholder="请输入小区名称"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" label-width="80px">
					<el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader>
				</el-form-item>
				<el-form-item label="" label-width="80px">
					<el-input placeholder="请输入小区详细地址" v-model="communityData.communityAddress"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="小区坐标" label-width="80px">
					<el-button @click="getGeo">获取位置</el-button>
					<span v-show="communityData.communityLongitude&&communityData.communityLatitude">
						{{communityData.communityLatitude}},{{communityData.communityLongitude}}
					</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</div>
		</el-dialog>

		<el-table :data="communityList" :header-cell-style="{backgroundColor:'#2f71ff'}" border>
			<el-table-column prop="communityId" label="ID"></el-table-column>
			<el-table-column prop="communityName" label="名称"></el-table-column>
			<el-table-column prop="communityAddress" label="位置"></el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>
			<el-table-column prop="communityProvince" label="省份"></el-table-column>
			<el-table-column prop="communityCity" label="市区"></el-table-column>
			<el-table-column prop="communityUserCount" label="用户数量"></el-table-column>
			<el-table-column prop="communityShopCount" label="关联门店"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link type="primary" @click="editCommunity(scope.row)"
						:underline="false">编辑小区</el-link>&nbsp;&nbsp;
					<el-link type="primary" v-model='communityData.communityId'
						@click="delCommunity(scope.row.communityId)" :underline="false">删除</el-link>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @next-click='next'
			@prev-click="prev" :current-page="queryInfo.pageNum" :page-sizes="[5,10, 20, 30, 40]" :page-size="100"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					name: '',
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5
				},
				date: '',
				total: 1,
				communityList: [],
				title: '新增小区',
				dialogFormVisible: false,
				communityData: {
					addOrUpdateFlag: 1,
					communityAddress: "",
					communityAreaCode: "",
					communityCity: "",
					communityCoordinates: "",
					communityDistrict: "",
					communityId: "",
					communityLatitude: "",
					communityLongitude: "",
					communityName: "",
					communityProvince: "",
				},
				address: [],
				citys: citys,
			}
		},
		methods: {
			delCommunity(Id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post(
							'community/communityRemove', {
								communityId: Id
							})
						.then((res) => {
							if (res.data.status == 200) {
								this.$message.success(res.data.message);
								this.queryCommunityList()
							} else {
								this.$message.error("删除失败");
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			editCommunity(row) {
				console.log(row)
				this.communityData = row;
				this.dialogFormVisible = true;
				this.title = '编辑小区';
				this.address = [
					this.communityData.communityProvince, this.communityData.communityCity,
					this.communityData
					.communityDistrict
				];
				this.communityData.addOrUpdateFlag = 2
			},
			getGeo() {
				if (!this.communityData.communityProvince) {
					this.$message.error('请选择省市区地址')
					return false;
				}
				let address = this.communityData.communityProvince + this.communityData
					.communityCity + this.communityData
					.communityDistrict + this.communityData.communityAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
					params: {
						key: '457886b5972a97e93fb9cdccebfd450f',
						'address': address
					}
				}).then((res) => {

					let location = res.data.geocodes[0].location
					this.communityData.communityLatitude = location.split(',')[0]
					this.communityData.communityLongitude = location.split(',')[1]
				})
			},
			onSubmit() {
				this.queryCommunityList()
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize = val,
					this.queryCommunityList()
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val,
					this.queryCommunityList()
			},
			next(index) {
				this.queryInfo.pageNum = index,
					this.queryCommunityList()
			},
			prev(index) {
				this.queryInfo.pageNum = index,
					this.queryCommunityList()
			},
			confirm() {
				this.$http.post(
						'community/communityUpdate ',
						this
						.communityData)
					.then((resp) => {
						//console.log(resp)
						if (resp.data.status == 200) {
							this.$message.success(resp.data.message)
							this.queryCommunityList()
							this.cancle()
						} else {
							this.$message.error('操作失败!')
						}
					})
			},
			//取消
			cancle() {
				this.dialogFormVisible = false;
				this.address = [];
				this.communityData = {
					addOrUpdateFlag: 1,
					communityAddress: "",
					communityAreaCode: "",
					communityCity: "",
					communityCoordinates: "",
					communityDistrict: "",
					communityId: "",
					communityLatitude: "",
					communityLongitude: "",
					communityName: "",
					communityProvince: "",
				}
			},
			queryCommunityList() {
				this.$http.get('community/communityList', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.communityList = res.data.data.list;
							this.total = res.data.data.total;
						} else {
							this.$message.error('服务器接口异常')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常')
					})
			},
			addCommunity() {
				this.dialogFormVisible = true
				this.title = '新增小区'
				this.communityData.addOrUpdateFlag = 1
			},

		},
		mounted() {
			//钩子函数---页面加载后直接执行的代码
			this.queryCommunityList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0];
					this.queryInfo.endTime = this.date[1];
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.communityData.communityProvince = this.address[0];
				this.communityData.communityCity = this.address[1];
				this.communityData.communityDistrict = this.address[2];
			}
		}
	}
</script>

<style>
</style>